import React, { useEffect, useMemo, useRef, useState } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";
interface PropsType {
  name: string;
  message: string;
}

const Index: React.FC<PropsType> = ({ name, message }) => {
  const [num, setNum] = useState(1);
  const [count, setCount] = useState(1);
  const [list, setList] = useState([]);
  const h1 = useRef<HTMLHeadingElement | null>(null);
  const localtion = useLocation();
  const navigate = useNavigate();
  const params = useParams();

  const doubleNum = useMemo(() => {
    console.log("*****************************8");
    return num * 2;
  }, [num]);

  useEffect(() => {
    console.log(localtion);
    console.log(params.id);
    // navigate({
    //   pathname: '/123',
    //   search: 'name=张三',
    //   hash: "321"
    // })
  });

  return (
    <div>
      <h1 className="h1" ref={(ref) => console.log(ref)}>
        函数组件
      </h1>
      <h2>
        {name}--{message}
      </h2>
      <hr />

      <h3>
        {num}
        <span onClick={() => setNum(num + 1)}>++</span>
      </h3>
      <h3>{doubleNum}</h3>
      <hr />

      <h3>
        {count}
        <span onClick={() => setCount(count + 1)}>++</span>
      </h3>
    </div>
  );
};

export default Index;
